<template>
  <van-popup
    v-model="visible"
    round
    position="bottom"
    :close-on-click-overlay="false"
    safe-area-inset-bottom
  >
    <div class="appointment">
      <h3 class="title">绑定你的手机号</h3>
      <div style="flex: 1; overflow: auto">
        <van-form
          ref="form"
          @submit="onSubmit"
          @failed="onFailed"
          :show-error-message="false"
          class="form"
        >
          <!-- <p>订单号：{{ order_sn }}</p> -->
          <p style="color: #f38a8e">
            亲爱的客户，请填写您的联系方式，以便获取优惠信息
          </p>
          <div class="form-item" style="margin-top: 20px">
            <label>姓名</label>
            <van-field v-model.trim="form.name" placeholder="姓名" />
          </div>
          <div class="form-item required">
            <label>手机号</label>
            <van-field
              v-model.trim="form.mobile"
              type="tel"
              placeholder="手机号"
              maxlength="11"
              :rules="rules.mobile"
            />
          </div>
        </van-form>
      </div>
      <div class="btns">
        <div class="btn" @click="close">取 消</div>
        <div class="btn submit" @click="clickSubmit">提 交</div>
      </div>
    </div>
  </van-popup>
</template>
<script>
import dayjs from "dayjs";
import { mobile } from "@/utils/pattern";
export default {
  data() {
    let now = dayjs();
    return {
      visible: false,
      appointDate: {
        min: now.add(1, "d").toDate(),
        max: now.add(30, "d").toDate(),
      },
      form: {
        name: "",
        mobile: "",
        address: "",
        appoint_date: "",
      },
      rules: {
        mobile: [
          { required: true, message: "请填手机号" },
          { pattern: mobile, message: "手机号格式不正确" },
        ],
        consignee_tel: [
          {
            message: "收货人手机号格式不正确",
            validator: (val) => {
              if (!val) return true;
              return mobile.test(val);
            },
          },
        ],
        area: [{ required: true, message: "请选择收货地区" }],
        address: [{ required: true, message: "请填详细地址" }],
      },
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.form = {
        name: "",
        mobile: "",
        address: "",
        appoint_date: "",
      };
    },
    openAppointDate() {
      this.$refs.datePicker.open();
    },
    appointDateConfirm(v) {
      this.form.appoint_date = dayjs(v).format("YYYY-MM-DD");
    },
    // 表单错误
    onFailed({ errors }) {
      this.$toast({
        message: errors[0].message,
        position: "top",
      });
    },
    clickSubmit() {
      this.$refs.form.submit();
    },
    async onSubmit() {
      // this.$toast(this.$api === undefined);
      // return;

      const { name, mobile, address, ...args } = this.form;
      let form = {
        name,
        mobile,
        address,
        data_set: args,
        // user_id
      };
      this.$emit("submit", form);
    },
  },
};
</script>

<style lang="scss" scoped>
.appointment {
  font-size: 0.3111rem;
  background: #fff;
  // padding: 10px;
  max-height: 70vh;
  max-width: 640px;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  .btns {
    display: flex;
    justify-content: space-around;
    text-align: center;
    // border-top: solid 1px #ebedf0;
    cursor: pointer;
    font-size: 0.35555rem;
    padding: 0.22222rem 0.111111rem;
    box-shadow: 0 0 0.4rem #eee;
    /* color: #909399; */
    .btn {
      margin: 0 1%;
      flex: 1;
      padding: 0.33333rem;
      border: solid 1px #ebedf0;
      border-radius: 4px;
      &.submit {
        box-shadow: none;
        background-color: #ff4b00;
        color: #fff;
        border-radius: 0.11111rem;
        border-color: #ff4b00;
      }
    }
  }
  .title {
    background-color: #ffa96f;
    color: #fff;
    margin: 0;
    padding: 0.3rem;
    text-align: center;
  }
  ::v-deep .van-cell {
    margin: 5px 0 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 8px 12px;
  }
  .line-box {
    span {
      color: red;
      font-weight: 600;
    }
  }
  .form {
    padding: 0.44444rem;
    width: 100%;
    box-sizing: border-box;
    p {
      margin-bottom: 5px;
      color: #999;
      font-size: 0.3111rem;
    }

    &-item {
      margin-bottom: 0.222222rem;
      label {
        color: #666;
        position: relative;
        font-size: 0.32rem;
        span {
          color: #888;
        }
      }
      &.required label {
        // padding-left: 8px;
        text-indent: 8px;
        display: block;
        &::after {
          content: "*";
          position: absolute;
          left: -8px;
          top: 0;
          color: red;
        }
      }
    }
  }
}
</style>
